<!--
 * Copyright 2010, Google Inc.
 * All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are
 * met:
 *
 *     * Redistributions of source code must retain the above copyright
 * notice, this list of conditions and the following disclaimer.
 *     * Redistributions in binary form must reproduce the above
 * copyright notice, this list of conditions and the following disclaimer
 * in the documentation and/or other materials provided with the
 * distribution.
 *     * Neither the name of Google Inc. nor the names of its
 * contributors may be used to endorse or promote products derived from
 * this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>WebGL SyncMark - Are you synced?</title>
<style>
html, body {
  width: 100%;
  height: 100%;
  border: 0px;
  padding: 0px;
  margin: 5px;
  background-color: white;
}
canvas {
  background-color: #F0F;
}
#instructions {
  background-color: #FFEEBB;
  font-family: sans-serif;
  padding: 4px;
}
</style>
<script src="../tdl/base.js"></script>
<script>
tdl.require('tdl.webgl');

var gl;
var canvas;
var aspect;

var output = alert
var music = null

function mainloop() {
  // Repeatedly run render(), attempt to hold 60 but the demo is
  // framerate independent so we will still keep sync even if we
  // lose frames.
  function render() {
    requestAnimationFrame(render);
    var time = music.currentTime
    gl.enable(gl.SCISSOR_TEST)
    gl.clearColor(0, 0, 0, 1.0)
    gl.scissor(0, 0, 200, 200)
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
    gl.clearColor(0, (time % 2.0) < 0.5 ? 1 : 0.2, 0, 1.0)
    gl.scissor(50, 50, 100, 100)
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
  }
  render();
}

function initializeGraphics() {
  canvas = document.getElementById('render_area');
  gl = tdl.webgl.setupWebGL(canvas);
  gl = tdl.webgl.create3DContext(canvas)
  if (!gl) {
    return false;
  }
  // Set some sane defaults.
  gl.disable(gl.BLEND);
  gl.depthFunc(gl.LEQUAL);
  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
  return true;
}

window.onload = function() {
  if (initializeGraphics()) {
    music = document.getElementById('soundtrack');
    music.volume = 0.13;
    music.play();
    mainloop()
  }
}

</script>
</head>

<body>
<audio id="soundtrack" src="beep.ogg" controls>
No support for the audio tag in this browser.
Get <a href="http://www.google.com/chrome">Google Chrome</a>.
</audio>
<br>
<div id="viewContainer">
<canvas id="render_area" width="200" height="200"></canvas>
</div>
<br>
<br>
<span id="instructions">
The green square should be visible exactly when a beep is heard.
<br>
Losing sync, either after a while or after seeking = <b>FAIL</b>
</span>
</body>
</html>
